<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('表单向导')" />
<th:block th:include="include :: jquery-smartwizard-css" />
	<th:block th:include="include :: datetimepicker-css" />
<style type="text/css">
/* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
.sw>.toolbar-bottom{
	z-index: 100;
    bottom: 0px;
    left: 0;
    width: 100%;
    position: fixed;
    text-align: right;
    background: #fff;
    box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
    border-top: 1px solid #e3e4e8;
}
/* 如果设置了是否自动调节高度为false,需要加滚动条 */
.sw>.tab-content{
	overflow-x: hidden;
    overflow-y: auto;
}
</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox">
					<div class="ibox-content">
						<div id="smartwizard">
							<ul class="nav">
								<li class="nav-item">
									<a class="nav-link" href="#step-1"> 第一步 </a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#step-2"> 第二步 </a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#step-3"> 第三步 </a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
									<div>
										<form class="form form-horizontal m-t">
											<div class="form-group">
												<label class="col-sm-3 control-label is-required">试卷名称：</label>
												<div class="col-sm-8">
													<input id="examName" name="examName" class="form-control" type="text" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label is-required">试卷类型：</label>
												<div class="col-sm-8">
													<select name="learnType" id="learnType" th:with="type=${@dict.getType('learn_type')}" class="form-control m-b" required>
														<option value="">所有</option>
														<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label is-required">判断题数量：</label>
												<div class="col-sm-8">
													<input id="panduan" name="panduan" class="form-control" type="number" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label is-required">单选题数量：</label>
												<div class="col-sm-8">
													<input id="danxuan" name="danxuan" class="form-control" type="number" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label is-required">多选题数量：</label>
												<div class="col-sm-8">
													<input id="duoxuan" name="duoxuan"  class="form-control" type="number" required>
												</div>
											</div>
										</form>
									</div>
								</div>
								<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
									<div>
										<form class="form form-horizontal m-t">
											<input name="quesIds" id="quesIds" class="form-control" type="hidden"  >
											<div class="form-group">
												<label class="col-sm-3 control-label">总题目数量：</label>
												<div class="col-sm-8">
													<input name="quesNum" class="form-control" type="text" required readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">总分：</label>
												<div class="col-sm-8">
													<input name="allPoints" class="form-control" type="text" required readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">及格分数：</label>
												<div class="col-sm-8">
													<input name="passPoints" class="form-control" type="text" required >
												</div>
											</div>

										</form>
									</div>
								</div>
								<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
									<div >
										<form class="form form-horizontal m-t">
											<div class="form-group">
												<label class="col-sm-3 control-label">考试时长(分钟)：</label>
												<div class="col-sm-8">
													<input id="duration" name="duration" class="form-control" type="number" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label font-noraml ">截止时间：</label>
												<div class="col-sm-8">
													<div class="input-group date">
														<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
														<input type="text" class="form-control" id="endTime" name="endTime" placeholder="yyyy-MM-dd HH:mm:ss" required>
													</div>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: jquery-smartwizard-js" />
	<th:block th:include="include :: datetimepicker-js" />
	<script>
		$(document).ready(function() {
			// 工具栏按钮
            var btnFinish = $('<a id="btn-finish"></a>').text('完成')
                                             .addClass('btn btn-info')
                                             .on('click', function(){ submit(); });
            var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
                                             .addClass('btn btn-danger')
                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
           	// 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
            var btnNext = $('<a id="btn-next"></a>').text('下一步')
											 .addClass('btn btn-info')
											 .on('click', function(){ $('#smartwizard').smartWizard("next");});
			var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
											 .addClass('btn btn-success')
											 .on('click', function(){ $('#smartwizard').smartWizard("prev"); });
            // 初始化表单向导组件
            $('#smartwizard').smartWizard({
                theme: 'arrows', // default, arrows, dots, progress
                autoAdjustHeight : false, // 自动调整高度, 默认true
                enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
                transition: {
                    animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
                },
                toolbarSettings: {
                	showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
    				showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                    toolbarExtraButtons: [btnCancel,btnPrev,btnNext,btnFinish]// 扩展的按钮集合
                }
            });
		});
		
		function submit(){
			var form3 = $("#step-3" ).find('.form');
			if (form3.validate().form()){
				var data = {};
				$('.form').each(function (index, form){
					// 这里可以使用$.common.formToJSON(formId);  需要在form上加id
					$.each($(form).serializeArray(), function(i, field) {
						if(data[field.name]) {
							data[field.name] += ("," + field.value);
						} else {
							data[field.name] = field.value;
						}
					});
				});
				$.ajax({
					url: ctx + "web/examPaper/createDone",
					dataType: "JSON",
					type: "post",
					contentType: 'application/json;charset=UTF-8', //不能加
					data: JSON.stringify(data),
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.operate.saveSuccess(result);
					}
				})
			}
		}
		// 显示步骤时将触发事件
		$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
			// 下面按钮是快速操作栏的
			$("#prev-btn").removeClass('disabled');
			$("#next-btn").removeClass('disabled');
			// 下面按钮是工具栏的
			$("#btn-prev").removeClass('disabled');
			$("#btn-next").removeClass('disabled');
			$("#btn-finish").removeClass('disabled');
			if(stepPosition === 'first') {
				$("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
				$("#btn-prev").addClass('disabled');
				$("#btn-finish").addClass('disabled');
			} else if(stepPosition === 'last') {
				$("#next-btn").addClass('disabled');// 快速操作栏（演示用）
				$("#btn-next").addClass('disabled');
			} else {
				$("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
				$("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
				$("#btn-prev").removeClass('disabled');
				$("#btn-next").removeClass('disabled');
				$("#btn-finish").addClass('disabled');
			}
		});
		
		// 该事件在离开某个步骤之前触发
		$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
			if(stepDirection == 'forward'){
				var form = $("#step-" + (currentStepNumber + 1)).find('.form');
				if(form.length > 0){
					if (form.validate().form()){
						if (currentStepNumber==0){
							var learnType= $("#learnType").val()
							var num1= $("#panduan").val()
							var num2= $("#danxuan").val()
							var num3= $("#duoxuan").val()
							$.post(ctx+"web/quesInfo/toRandomList",{learnType:learnType,panduan:num1,danxuan:num2,duoxuan:num3},function (res) {
								$("input[name='quesIds']").val(res.quesIds)
								$("input[name='quesNum']").val(res.quesIds.length==0?0:res.quesIds.split(',').length)
								$("input[name='allPoints']").val(res.allPoints)
							})
						}else if(currentStepNumber==1){
							if (!$("#quesIds").val()){
								$.modal.alertWarning("此试卷类型下无对应的题库");
								return false;
							}
						}
					}else {
						return false;
					}
				}
				return true;
			}
			return true;
		});
		

		layui.use('laydate', function(){
			var laydate = layui.laydate;
			laydate.render({
				elem: '#startTime',
				type: 'datetime',
				trigger: 'click'
			});
			laydate.render({
				elem: '#endTime',
				type: 'datetime',
				trigger: 'click'
			});
		})

	</script>
</body>
</html>
